<template>
  <div class="box" @click="thisFalse">
    <div class="btn_group">
      <button :class="{ active: input_btn == '直播' }" @click="input_btn = '直播'">直播搜索</button>
      <button
        :class="{ active: input_btn == '商品' }"
        @click="$router.push(`/talent_main/searchRoot?keyword=${keywords}`)"
      >商品搜索</button>
      <button
        :class="{ active: input_btn == '达人' }"
        @click="$router.push(`/talent_main/search?keyword=${keywords}`)"
      >达人搜索</button>
    </div>
    <div id="liveSearchRoot">
      <div>
        <div class="mysearchBox">
          <div class="input_group">
            <input
              type="text"
              v-model="keywords"
              @keyup.enter="toSearch"
              placeholder="请输入直播间名称或达人名称进行搜索"
              @click.stop="Inputfocus"
            />
            <div @click="toSearch">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <div class="clearBox" @click="clear_values">
            <img src="@/assets/li/clearAll.png" alt />
            <span>重置筛选条件</span>
          </div>
          <!-- 搜索记录框 -->
          <div
            class="InputRecord"
            v-show="isShow && searchRecord.length !== 0 && keywords.length == 0"
          >
            <ul>
              <li class="first">
                搜索记录
                <img src="@/assets/zhao/delete.png" alt @click="removeAll()" />
              </li>
              <li
                class="second"
                v-for="(item, index) in searchRecord"
                :key="index"
                @click="add_click(item.log)"
              >
                <span>{{ item.log }}</span>
                <img src="@/assets/meng/my_header01.png" alt @click.stop="removeThis(item.id)" />
              </li>
            </ul>
          </div>
        </div>

        <!-- 行业 -->
        <category_industry v-model="industryItemObj" :class="'mt_20'"/>
        <!-- 商品种类 -->
        <category_goods v-model="checkedDatasJoe" />
        <!-- 筛选条件 -->
        <div class="showCondition dividerBox" v-show="showCondition">
          <section class="section01 mt_20">
            <p>筛选条件</p>
            <div>
              <el_select
                v-model="loveMax"
                title="人气峰值"
                src="../../../../static/wang/hot.png"
                :options="[
                  '不限',
                  '<1k',
                  '1k-5k',
                  '5k-1w',
                  '1w-5w',
                  '5w-10w',
                  '>10w'
                ]"
              />
              <el_select
                class="biliwl"
                v-model="goodsNum"
                title="商品数"
                src="../../../../static/meng/search07.png"
                :options="['不限', '<10', '10-50', '50-100', '>100']"
              />

              <el_select
                v-model="liveSaleNum"
                title="直播销量(预估)"
                src="../../../../static/wang/dataS.png"
                :options="['不限', '<5k', '5k-1w', '1w-5w', '5w-10w', '>10w']"
              />
              <el_select
                v-model="liveSaleMoney"
                title="直播销售额(预估)"
                src="../../../../static/wang/priceS.png"
                :options="[
                  '不限',
                  '<10w',
                  '10w-50w',
                  '50w-100w',
                  '100w-300w',
                  '300w-500w',
                  '500w-1000w',
                  '>1000w'
                ]"
              />
              <!-- <el_select
          v-model="isConnect"
          title="是否连麦"
          src="../../../../static/wang/mai.png"
          :options="['不限', '是', '否']"
              />-->
              <!-- 多选 -->
              <multi_select v-model="hasGoods" class="multiBox" :options="['直播带货']" />
            </div>
          </section>
          <!-- 达人画像 -->
          <section class="section01">
            <p>达人画像</p>
            <div>
              <el_select
                v-model="talentAge"
                title="达人年龄"
                src="../../../../static/meng/search08.png"
                :options="[
                  '不限',
                  '18-24',
                  '25-30',
                  '31-35',
                  '36-40',
                  '41-45',
                  '46-50',
                  '其他'
                ]"
              />
              <el_select
                v-model="talentGender"
                title="达人性别"
                src="../../../../static/meng/search09.png"
                :options="['不限', '男', '女']"
              />
              <el_select_city
                v-model="talentArea"
                title="达人地域"
                src="../../../../static/meng/search10.png"
              />
              <!-- <el_select
          v-model="talentStar"
          title="达人星座"
          src="../../../../static/meng/search11.png"
          :options="[
            '不限',
            '白羊座',
            '金牛座',
            '双子座',
            '巨蟹座',
            '狮子座',
            '处女座',
            '天秤座',
            '天蝎座',
            '射手座',
            '摩羯座',
            '水瓶座',
            '双鱼座',
          ]"
              />-->
            </div>
          </section>
          <!-- 粉丝画像 -->
          <section class="section01">
            <p>粉丝画像</p>
            <div>
              <el_select
                v-model="fansAge"
                title="主要年龄"
                src="../../../../static/meng/search08.png"
                :options="[
                  '不限',
                  '18-24',
                  '25-30',
                  '31-35',
                  '36-40',
                  '41-45',
                  '46-50',
                  '其他'
                ]"
              />
              <el_select
                v-model="fansGender"
                title="主要性别"
                src="../../../../static/meng/search09.png"
                :options="['不限', '男', '女']"
              />
              <!-- <el_select_city
          v-model="fansArea"
          title="主要地域"
          src="../../../../static/meng/search10.png"
              />-->
              <!-- <el_select
          v-model="fansStar"
          title="主要星座"
          src="../../../../static/meng/search11.png"
          :options="[
            '不限',
            '白羊座',
            '金牛座',
            '双子座',
            '巨蟹座',
            '狮子座',
            '处女座',
            '天秤座',
            '天蝎座',
            '射手座',
            '摩羯座',
            '水瓶座',
            '双鱼座',
          ]"
              />-->
            </div>
          </section>
          <!-- 开播时间 -->
          <div class="optionsBox">
            <span>开播时间</span>
            <el-date-picker
              class="long_time"
              v-model="liveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              prefix-icon="el-icon-arrow-down"
              unlink-panels
              :clearable="false"
              :picker-options="pickeroptions"
            ></el-date-picker>
          </div>
          <div class="dividerBox">
            <div class="dividerText" @click="showCondition = false">
              <img src="@/assets/li/closeCon.png" alt />
              收起筛选条件
            </div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="dividerBox" v-show="!showCondition">
          <div class="dividerText" @click="showCondition = true">
            <img src="@/assets/li/openCon.png" alt />
            展开筛选条件
          </div>
        </div>
      </div>
    </div>

    <!-- <RadioGroupSort
      :radio_values="['按开播时间', '按观看人数峰值', '按销售额']"
      v-model="KindName"
      class="searchRadio"
    />-->
    <div id="searchRes">
      <section>
        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{ isShow: isFixed }"
          :style="showLeft == true ? 'left:98px' : 'left:222px'"
        >
          <li pl>直播间</li>
          <li pl15>达人</li>
          <li
            tc
            @click="sort_fun(true, 0)"
            v-if="orderType == 'desc' && sortValue == 0"
            class="cursor"
          >
            开播时间
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 0"
              class="cursor"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li v-else tc @click="sort_fun(false, 0)" class="cursor">
            开播时间
            <img src="@/assets/meng/up_down.png" v-if="orderType == 'asc' && sortValue == 0" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc>直播时长</li>
          <li
            tc
            class="cursor"
            @click="sort_fun(true, 1)"
            v-if="orderType == 'desc' && sortValue == 1"
          >
            观看人数峰值
            <img src="@/assets/meng/down_up.png" v-if="orderType == 'desc' && sortValue == 1" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li class="cursor" v-else tc @click="sort_fun(false, 1)">
            观看人数峰值
            <img src="@/assets/meng/up_down.png" v-if="orderType == 'asc' && sortValue == 1" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            class="cursor"
            @click="sort_fun(true, 5)"
            v-if="orderType == 'desc' && sortValue == 5"
          >
            商品数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 5"
              class="m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="m_l" />
          </li>
          <li v-else tc @click="sort_fun(false, 5)" class="cursor">
            商品数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 5"
              class="cursor"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            @click="sort_fun(true, 4)"
            v-if="orderType == 'desc' && sortValue == 4"
            class="cursor"
          >
            直播销量(预估)
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 4"
              class="m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="m_l" />
          </li>
          <li v-else tc @click="sort_fun(false, 4)" class="cursor">
            直播销量(预估)
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 4"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            pr
            @click="sort_fun(true, 3)"
            v-if="orderType == 'desc' && sortValue == 3"
            class="cursor"
          >
            直播销售额(预估)
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 3"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li v-else tc @click="sort_fun(false, 3)" class="cursor">
            直播销量(预估)
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 3"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
        </ul>
        <table class="table" ref="tableEl">
          <thead>
            <tr :class="{ is_fixed: isFixed }" ref="th_tr_El">
              <th>直播间</th>
              <th>达人</th>
              <th
                v-if="orderType == 'desc' && sortValue == 0"
                @click="sort_fun(true, 0)"
                class="cursor"
              >
                开播时间
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 0"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 0)" class="cursor">
                开播时间
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 0"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th>直播时长</th>
              <th
                @click="sort_fun(true, 1)"
                v-if="orderType == 'desc' && sortValue == 1"
                class="cursor"
              >
                观看人数峰值
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 1"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 1)" class="cursor">
                观看人数峰值
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 1"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!-- <th>本场音浪</th> -->
              <th
                @click="sort_fun(true, 5)"
                v-if="orderType == 'desc' && sortValue == 5"
                class="cursor"
              >
                商品数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 5"
                  class="m_l"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="m_l" />
              </th>
              <th v-else @click="sort_fun(false, 5)" class="cursor">
                商品数
                <img src="@/assets/meng/up_down.png" v-if="orderType == 'asc' && sortValue == 5" />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(true, 4)"
                v-if="orderType == 'desc' && sortValue == 4"
                class="cursor"
              >
                直播销量(预估)
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 4"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 4)" class="cursor">
                直播销量(预估)
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 4"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(true, 3)"
                v-if="orderType == 'desc' && sortValue == 3"
                class="cursor"
              >
                直播销售额(预估)
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 3"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 3)" class="cursor">
                直播销售额(预估)
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 3"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!-- <th>操作</th> -->
            </tr>
          </thead>
          <tbody v-if="resData.length != 0 && !loading">
            <tr v-for="(item, index) in resData" :key="index" :id="!index ? 'tr1' : ''">
              <td>
                <div class="goodsBox" @click="toLiveDetails(item, '0')">
                  <!-- <img :src="item.roomLogo" /> -->
                  <div class="imgBox">
                    <img :src="item.roomLogo" @error="defaultImgFn(liveVideo,$event)" />
                    <div class="liveBox" v-if="item.status == 1">
                      <p class="livingGif">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </p>
                    </div>
                  </div>
                  <div class="goodsRight">
                    <div>
                      <img src="@/assets/meng/pop01.png" v-if="item.isShop == 1" />
                      <img src="@/assets/meng/pop02.png" v-if="item.isRed == 1" class="redImg" />
                      <span>{{ item.roomTitle }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <div class="talentBox">
                  <img
                    :src="item.logo"
                    class="avatorImg"
                    @click="go_to_page01(item.authorId)"
                    @error="defaultImgFn(superman,$event)"
                  />
                  <div class="talentRight">
                    <p
                      @click="go_to_page01(item.authorId)"
                      style="cursor: pointer"
                    >{{ item.nickName }}</p>

                    <p>粉丝数：{{ format_num(item.totalFans) }}</p>
                  </div>
                </div>
              </td>
              <td>
                <p class="a1">{{ timestamp(item.beginUnx, "M-D h:m") }}</p>
                <!-- <p class="a1">{{ timestamp(item.beginUnx, "") }}</p> -->
              </td>
              <td>
                <p>{{ format_time((item.endUnix - item.beginUnx) * 1000) }}</p>
              </td>
              <td>
                <p class="a1">{{ format_num(item.peoplePeak) }}</p>
                <p class="updating" v-if="item.status == 1">正在更新</p>
              </td>
              <!-- <td>
                <p class="a1">{{ format_num(item.soundbyte) }}</p>
                <p class="updating" v-if="item.status == 1">正在更新</p>
              </td>-->
              <td>
                <p v-if="item.isShop == 1" class="a1">{{ format_num(item.liveproduct) }}</p>
                <p v-if="item.isShop == 1 && item.status == 1" class="updating">正在更新</p>
                <p v-if="item.isShop == 0" class="a1">--</p>
              </td>
              <td>
                <p v-if="item.isShop == 1" class="a1">{{ format_num(item.livevolume) }}</p>
                <p v-if="item.isShop == 1 && item.status == 1" class="updating">正在更新</p>
                <p v-if="item.isShop == 0" class="a1">--</p>
              </td>
              <td>
                <p v-if="item.isShop == 1" class="a1">{{ format_num(item.livesales) }}</p>
                <p v-if="item.isShop == 1 && item.status == 1" class="updating">正在更新</p>
                <p v-if="item.isShop == 0" class="a1">--</p>
              </td>
              <!-- <td>
                <div
                  class="detailsBtnwl"
                  @click="toLiveDetails(item.roomId, '0')"
                >
                  查看详情
                </div>
              </td>-->
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="!permissions && !loading">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <!-- <div class="upgradeBox" v-if="permissions && !loading &&vipLevel==0">
          <RankUpgrade class="rankUpgrade" />
        </div> -->
        <!-- <p
          class="nothing"
          v-show="
            resData.length != 0 &&
              !loading &&
              permissions &&
              resData.length < 30
          "
        >我是有底线的～</p> -->
        <!-- <div
          class="pageBox"
          v-if="!loading && resData.length != 0 && !permissions == 0"
        >-->
        <div class="pageBox" v-if="!loading&&(resData.length||!permissions)">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="searchData"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
      </section>

      <div
        v-loading="loading"
        v-if="loading && !needBuy"
        class="loading"
        style="margin-top: 66px"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>

      <div class="empty" v-show="!loading && resData.length == 0 && permissions">
        <img src="@/assets/liu/zw.png" />
        <p>暂未获取到相关直播记录，换个搜索条件试试吧~</p>
      </div>
    </div>
  </div>
</template>
<script>
export function trimStr(word) {
  return word.replace(/^\s+|\s+$/gm, '')
}
import RadioGroupSort from '@/component/radioGroupSort.vue'
import RankUpgrade from '@/component/rankUpgrade.vue'
import category_goods from '@/component/category_goods.vue'
import superman from '@/assets/img/superman.png'
import liveVideo from '@/assets/img/live-video.png'
import category_industry from '@/component/category_industry';

export default {
  data() {
    return {
      superman: superman,
      liveVideo: liveVideo,
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: [],
      },
      permissions: 1,
      input_btn: '直播',
      keywords: '',
      loveMax: '不限',
      goodsNum: '不限',
      liveSaleNum: '不限',
      liveSaleMoney: '不限',
      hasGoods: '',
      goodsKind: {
        categoryName: '全部',
        id: '0',
        level: 0,
        sublist: null,
      },
      talentAge: '不限',
      talentGender: '不限',
      talentArea: '不限,不限',
      talentStar: '不限',
      fansAge: '不限',
      fansGender: '不限',
      fansArea: '不限,不限',
      fansStar: '不限',
      liveTime: [],
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ) // 返回 所有时间 大于 当前时间
        },
      },

      KindName: '按开播时间',
      cancel: null,
      resData: [],

      busy: false,
      // count: "",
      page: 1,
      needBuy: false,
      showCondition: false,
      count: 0,
      loading: true,
      nothing: true,
      isFixed: false,
      offsetTop: 0,
      showLeft: true,
      showScroll: 420,
      sortValue: 1,
      orderType: 'desc',
      categoryIdFirst: 0,
      procategoryId: [],
      isShow: false, // 控制搜素框显示或隐藏
      searchRecord: [], //用来存放浏览记录
      vipLevel: '',
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    }
  },
  computed: {
    // 全网销量榜
    changeData() {
      const {
        industryItemObj,
        loveMax,
        goodsNum,
        liveSaleNum,
        liveSaleMoney,
        hasGoods,
        talentAge,
        talentGender,
        talentArea,
        liveTime,
        KindName,
        fansAge,
        fansGender,
      } = this
      return {
        industryItemObj,
        loveMax,
        goodsNum,
        liveSaleNum,
        liveSaleMoney,
        hasGoods,
        talentAge,
        talentGender,
        talentArea,
        liveTime,
        KindName,
        fansAge,
        fansGender,
      }
    },
  },
  components: { RadioGroupSort, RankUpgrade, category_goods ,category_industry},
  watch: {
    checkedDatasJoe() {
      //新筛选组件用
      this.page = 1
      this.resData = []
      this.searchData()
    },
    changeData() {
      this.resData = []
      this.searchData()
      this.page = 1
    },
    KindName: function (newVal, oldVal) {
      this.KindName = newVal
      this.resData = []
      this.page = 1
      //this.$store.commit("changeLiveSearch_page", this.page);
    },
    keywords: function (newVal, oldVal) {
      if (newVal == '') {
        this.page = 1
        this.resData = []
        this.searchData()
      }
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = old
      this.setTBBar()
    },
    showCondition(old, newOld) {
      if (newOld) {
        this.showScroll = 420
      } else {
        this.showScroll = 660
      }
    },
    goodsKind(newVal, oldVal) {
      this.categoryIdFirst = newVal.id
      this.procategoryId = []
      this.resData = []
      this.searchData()
    },
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight)
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar()
    })
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //vip等级
    //当前日期为结束日期
    this.showLeft = this.$store.state.left_nav_flag
    console.log(this.showLeft)
    let d = new Date()
    let year1, month1, day1
    ;[year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()]
    let date1 = new Date(year1, month1, day1, 7)
    this.liveTime.push(date1)
    //开始日期设置
    let year2, month2, day2
    d.setTime(d.getTime() - 7 * 24 * 60 * 60 * 1000)
    ;[year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()]
    let date2 = new Date(year2, month2, day2, 7)

    this.liveTime.unshift(date2)
    // 如果从首页过来的 会带过来搜索词
    if (this.$route.query.keyword) {
      this.keywords = this.$route.query.keyword
    }
    this.searchData()
  },
  methods: {
    defaultImgFn(url, e) {
      console.log(url, e)
      if (url == liveVideo) {
        e.target.src = liveVideo
      } else if (url == superman) {
        e.target.src = superman
      }
    },
    childByValue(childValue) {
      // childValue就是子组件传过来的值
      this.procategoryId = childValue
      this.resData = []
      this.searchData()
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = 'asc'
      } else {
        this.orderType = 'desc'
      }
      this.sortValue = parm02
      this.dataList = []
      this.page = 1
      this.searchData()
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false
      let nodes = pNode.childNodes
      let newList = []
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i]
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node)
        }
      }
      return newList
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl
        let ulEl = this.$refs.fixedThead
        let tr1 = document.querySelector('#tr1')
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1)
          let liEls = this.getChilds(ulEl)
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px'
          }
        }
      })
    },
    searchData(cpage) {
      let that = this
      that.loading = true
      // console.log(cpage);
      if (cpage) {
        this.backTop()
        this.page = cpage
      }
      //that.resData = [];
      //直播带货
      let hasGoods = 0
      if (that.hasGoods.indexOf('直播带货') != -1) {
        hasGoods = 1
      } else {
        hasGoods = 0
      }
      // 人气峰值
      let peoplepeak = '不限'
      if (that.loveMax.indexOf('<1k') != -1) {
        peoplepeak = '0-1000'
      } else if (that.loveMax.indexOf('>10w') != -1) {
        peoplepeak = '100000-9999999999'
      } else {
        if (
          that.loveMax.indexOf('k') != -1 &&
          that.loveMax.indexOf('w') != -1
        ) {
          peoplepeak = that.loveMax.replace(/(\w*)k(.*)w(.*)/g, '$1000$20000')
        } else {
          if (that.loveMax.indexOf('k') != -1) {
            peoplepeak = that.loveMax.replace(/k/g, '000')
          }
          if (that.loveMax.indexOf('w') != -1) {
            peoplepeak = that.loveMax.replace(/w/g, '0000')
          }
        }
      }
      // 直播商品数
      let livepro = '不限'
      if (that.goodsNum.indexOf('<10') != -1) {
        livepro = '0-10'
      } else if (that.goodsNum.indexOf('>100') != -1) {
        livepro = '100-9999999999'
      } else {
        livepro = that.goodsNum
      }
      // 直播销量
      let livevolume = '不限'
      if (that.liveSaleNum.indexOf('<5k') != -1) {
        livevolume = '0-5000'
      } else if (that.liveSaleNum.indexOf('>10w') != -1) {
        livevolume = '100000-9999999999'
      } else {
        if (
          that.liveSaleNum.indexOf('k') != -1 &&
          that.liveSaleNum.indexOf('w') != -1
        ) {
          livevolume = that.liveSaleNum.replace(
            /(\w*)k(.*)w(.*)/g,
            '$1000$20000'
          )
        } else {
          if (that.liveSaleNum.indexOf('k') != -1) {
            livevolume = that.liveSaleNum.replace(/k/g, '000')
          }
          if (that.liveSaleNum.indexOf('w') != -1) {
            livevolume = that.liveSaleNum.replace(/w/g, '0000')
          }
        }
      }
      // 销售额
      let livesalesvolume = '不限'
      if (that.liveSaleMoney.indexOf('<10w') != -1) {
        livesalesvolume = '0-100000'
      } else if (that.liveSaleMoney.indexOf('>1000w') != -1) {
        livesalesvolume = '10000000-9999999999'
      } else {
        if (that.liveSaleMoney.indexOf('w') != -1) {
          livesalesvolume = that.liveSaleMoney.replace(/w/g, '0000')
        }
      }
      // 达人年龄
      // let age = "不限";
      // if (that.talentAge == "40+") {
      //   age = "40-99999";
      // } else {
      //   age = that.talentAge;
      // }
      let age = that.talentAge
      // 粉丝年龄
      // let more_age = "不限";
      // if (that.fansAge == "40+") {
      //   more_age = "40-99999";
      // } else {
      //   more_age = that.fansAge;
      // }
      let more_age = that.fansAge
      // 是否连麦
      let laimai = 2
      switch (that.isConnect) {
        case '不限':
          laimai = 2
          break
        case '是':
          laimai = 1
          break
        case '否':
          laimai = 0
          break
      }
      // 直播带货
      let isshop = 0
      if (that.hasGoods.indexOf('直播带货') != -1) {
        isshop = 1
      }
      let sort
      switch (that.KindName) {
        case '按观看人数峰值':
          sort = 1
          break
        case '按本场音浪':
          sort = 2
          break
        case '按销售额':
          sort = 3
          break
        case '按开播时间':
          sort = 0
          break
      }
      //console.log(sort, that.KindName);
      //this.$store.commit("changeLiveSearch_sort", sort);
      that.$axios
        .post(
          '/api/live/search',
          {
            keyword: that.trimStr(that.keywords),
            category: this.industryItemObj.id,
            procategory: '0',
            firstcategoryId: this.checkedDatasJoe.parentId,
            procategorys: this.checkedDatasJoe.childIds, //二级商品类目
            // firstcategoryId: this.categoryIdFirst,
            // procategorys: this.procategoryId, //二级商品类目
            peoplepeak: peoplepeak, //人气峰值
            livepro: livepro, //商品数 区间
            livevolume: livevolume, //	销量 区间
            livesalesvolume: livesalesvolume, //	销售额 区间
            laimai: laimai, //连麦 连麦 0=否,1=是 默认=2
            isshop: isshop, //直播带货 0=否,1=是 默认=2
            age: age, //年龄区间
            gender: that.genderChange(that.talentGender), //性别，0 女 1 男  2其他
            province: that.talentArea.split(',')[0], //省份名称
            city: that.talentArea.split(',')[1], //城市名称
            // star: that.talentStar, //星座名称
            more_age: more_age, //	粉丝主要年龄 区间
            more_gender: that.genderChange(that.fansGender), //	粉丝主要性别 0 女 1 男  2其他
            more_province: that.fansArea.split(',')[0], //	粉丝主要省份
            more_city: that.fansArea.split(',')[1], //	粉丝主要城市
            // more_star: that.fansStar, //	粉丝主要星座
            startdate: that.formatDate(that.liveTime[0], 'yyyy-MM-dd'), //直播开始时间
            enddate: that.formatDate(that.liveTime[1], 'yyyy-MM-dd'), //直播结束时间
            page: that.page, //页码
            size: 30, //	每页的条数
            order_by: this.orderType, //排序方式 desc,asc
            sort: this.sortValue, //排序字段 默认综合排序=1 1=人数峰值，2=音浪，3=销售额 0=按开播时间
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel()
              }
              that.cancel = c
            }),
          }
        )
        .then((response) => {
          that.loading = false
          if (response.data.code1 ==1013||response.data.code == 1003||response.data.code == 1013) {
            that.resData = []; //无权限也要展示翻页
            that.permissions = 0
          } else {
            that.permissions = 1
          }
          if (response.data.code == 0) {
            //that.count = response.data.count;
            // that.page += 1;
            // that.$store.commit("changeLiveSearch_page", that.page);
            that.resData = response.data.data
            //console.log(response.data.count);
            if (response.data.count > 6000) {
              that.count = 6000
            } else {
              this.count = response.data.count
            }
            // this.count = response.data.count;
            that.nothing = true
            this.loading = false
            this.setTBBar()
          }
          if (response.data.code == 1002) {
            this.resData = []
            that.nothing = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 搜索
    toSearch() {
      //   this.dataList = [];
      this.page = 1
      this.searchData()
      // 记录搜索记录
      this.$axios({
        method: 'get',
        url: '/api/customer/RecordSearchLog',
        params: {
          key: this.keywords,
        },
      })
        .then((res) => {
          // console.log(res);
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 性别
    genderChange(value) {
      switch (value) {
        case '男':
          return 1
          break
        case '女':
          return 0
          break
        case '不限':
          return 2
          break
      }
    },

    loadMore() {
      this.searchData()
    },
    // 跳直播详情
    toLiveDetails(item, tabNo) {
      let path = '';
      if(item.status == 1){
        path = `/live/${item.roomId}`;
      }else{
        path = `/talent_main/liveDetailsRoot/${item.roomId}/${tabNo}`;
      }
      let router = this.$router.resolve({path: path});
      window.open(router.href, '_blank');
    },
    // 跳达人详情
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}`,
      })
      window.open(router.href, '_blank')
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      })
      window.open(router.href, '_blank')
    },
    clear_values() {
      this.input_btn = '直播';
      this.keywords = '';
      this.order_by = 'desc';
      this.sortValue = 1;
      this.talentArea = '不限,不限';
      this.industryItemObj = {
        name:'全部',
        id:'0'
      };
      this.loveMax = '不限';
      this.goodsNum = '不限';
      this.liveSaleNum = '不限';
      this.liveSaleMoney = '不限';
      this.hasGoods = '';
      this.goodsKind = '全部';
      this.talentAge = '不限';
      this.talentGender = '不限';
      this.talentStar = '不限';
      this.fansAge = '不限';
      this.fansGender = '不限';
      this.fansStar = '不限';
      this.fansArea = '不限,不限';
      this.page = 1;
      this.resData = [];
      this.checkedDatasJoe = {
        //组件监听此值是否为初始状态
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: [],
      };
      this.searchData();
      this.liveTime = [];
      let d = new Date();
      let year1, month1, day1;
      [year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()];
      let date1 = new Date(year1, month1, day1, 7);
      this.liveTime.push(date1);
      //开始日期设置
      let year2, month2, day2;
      d.setTime(d.getTime() - 7 * 24 * 60 * 60 * 1000);
      [year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()];
      let date2 = new Date(year2, month2, day2, 7);
      this.liveTime.unshift(date2);
    },
    closeBuy() {
      this.page = 1
      this.resData = []
      this.searchData()
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.isFixed = scrollTop > this.showScroll ? true : false
    },
    // 返回头部
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0
    },
    // 点击表单获取搜索记录
    Inputfocus() {
      this.isShow = true
      this.$axios({
        method: 'get',
        url: '/api/customer/GetSearchLog',
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击搜素记录赋值给搜索框
    add_click(item) {
      this.isShow = false
      this.keywords = item
      this.toSearch()
    },
    // 点击x 删除该条搜索记录
    removeThis(id) {
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: id,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = this.searchRecord.filter(
              (item) => item.id !== id
            )
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击删除图标删除全部搜索记录
    removeAll() {
      let itemLog = ''
      this.searchRecord.forEach((item) => {
        itemLog += item.id + ','
      })
      itemLog = itemLog.substring(0, itemLog.lastIndexOf(','))
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: itemLog,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = []
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击别处 让搜索记录框消失
    thisFalse() {
      this.isShow = false
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight)
  },
}
</script>
<style lang="less" scoped>
#liveSearchRoot {
  background: #fff;
  height: fit-content;
  margin-right: 20px;
  padding: 0 20px;
  margin-top: 18px;
  padding-top: 17px;
  border-radius: 4px 4px 0 0;
  // margin-bottom: 10px;
  padding-bottom: 22px;
  //min-height: 100vh;
  .input_group {
    position: relative;
    width: 400px;
    height: 44px;
    border-radius: 4px;
    // border: solid 1px #e6e6e6;
    border: solid 2px #fd7f2c;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      padding-left: 19px;
      padding-right: 70px;
      border: none;
      border-radius: 4px 4px 4px 4px;
      color: #222;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: -1px;
      text-align: center;
      width: 50px;
      height: 42px;
      background-color: #fd7f2c;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
      }
    }
  }
  .InputRecord {
    width: 400px !important;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #fff !important;
    position: absolute !important;
    top: 192px !important;
    left: 222px;
    z-index: 10;
    padding: 4px 10px;
    box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 0.7);
    ul {
      .first {
        width: calc(100% - 14px);
        height: 32px;
        // background: chartreuse;
        font-size: 12px;
        line-height: 36px;
        color: #888888;
        padding-left: 14px;
        img {
          float: right;
          width: 15px;
          height: 16px;
          margin: 8px 9px 0px 0px;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .second {
        width: calc(100% - 14px);
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #222222;
        padding-left: 14px;
        span {
          display: inline-block;
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:hover {
          cursor: pointer;
          background-color: #f9f9f9;
        }
        &:hover img {
          display: block;
        }
        img {
          float: right;
          margin: 13px 11px 0px 0px;
          display: none;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }

  .section01 {
    display: flex;
    > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // max-width: 1250px;
    }
    #multi_select {
      margin-bottom: 20px;
    }
    #el_select {
      margin-right: 30px;
      margin-bottom: 10px;
    }
    #el_select_city {
      margin-right: 30px;
      margin-bottom: 20px;
    }
    > p {
      white-space: nowrap;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 32px;
      letter-spacing: 0px;
      color: #888888;
      margin-right: 20px;
    }
  }
  .mb_15 {
    margin-bottom: 15px;
  }
  .confirm_clear {
    margin-top: 51px;
    margin-bottom: 10px;
    > button:first-child {
      background-color: #fd7f2c;
      color: #fff;
      line-height: 46px;
    }
    button {
      box-sizing: border-box;
      width: 150px;
      height: 48px;
      font-size: 16px;
      border-radius: 4px;
    }
  }
  .optionsBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 18px;
    .long_time {
      background-color: #fff;
    }
    /deep/.el-range-input {
      background-color: #fff !important;
    }
    span {
      font-size: 14px;
      color: #888;
      padding-right: 16px;
    }
    .el-date-editor {
      margin-right: 31px;
    }
  }
  .mysearchBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .clearBox {
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 30px;
      img {
        width: 15px;
        height: 16px;
      }
      span {
        font-size: 14px;
        color: #888888;
        padding-left: 5px;
      }
    }
    .showCondition {
      border-top: dashed 1px #e5e5e5;
    }
  }
  //分割线
  .dividerBox {
    border-top: 1px dashed #e5e5e5;
    position: relative;
    .dividerText {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      font-size: 14px;
      color: #fd7f2c;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 14px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
}
.box {
  margin-left: 14px;
}
.btn_group {
  margin-top: 14px;
  margin-bottom: -8px;
  .active {
    background-color: #fd7f2c;
    color: #ffffff !important;
  }
  button {
    font-size: 14px;
    color: #555;
    width: 100px;
    height: 40px;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 7px;
    font-weight: 600;
  }
  button:hover {
    color: #ff924b;
  }
}
#searchRes {
  background: #fff;

  margin-right: 20px;
  padding: 0 20px;

  // padding-top: 17px;
  position: relative;
  // border-radius: 4px ;
  height: fit-content;
  min-height: 75vh;
  .updating {
    width: 62px;
    height: 22px;
    line-height: 22px;
    background-color: #fff4ed;
    border-radius: 4px;
    font-size: 12px;
    color: #fd8a3e;
    text-align: center;
  }
  .tab01 {
    margin-top: 46px;
  }
  table {
    // margin-top: 19px;
    text-align: center;
    box-sizing: border-box;
    thead {
      th {
        padding: 0 5px;
        img {
          width: 5px;
          height: 10px;
          vertical-align: baseline;
        }
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 40px;
        width: 20%;
      }
      th:nth-child(2) {
        text-align: left;
        padding-left: 15px;
        width: 14%;
      }
      th:last-child {
        padding-right: 30px;
      }
    }
    tbody {
      tr {
        height: 78px;
        td:nth-of-type(3),
        td:nth-of-type(4),
        td:nth-of-type(5),
        td:nth-of-type(6),
        td:nth-of-type(7),
        td:nth-of-type(8),
        td:nth-of-type(9) {
          width: 10%;
          font-size: 15px;
          font-family: DINAlternate-Bold;
          p {
            text-align: center;
            margin: 0 auto;
          }
        }
        td:last-child {
          padding-right: 30px;
        }
        .a1 {
          font-size: 15px;
        }
        // 商品
        .goodsBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 35px;
          cursor: pointer;
          .imgBox {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            position: relative;
            border: 1px solid #e5e5e5;
            img {
              width: 50px;
              height: 50px;
              border-radius: 6px;
            }
            .liveBox {
              position: absolute;
              right: 0;
              bottom: 0;
              width: 20px;
              height: 20px;
              background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
                linear-gradient(#ffffff, #ffffff);
              background-blend-mode: normal, normal;
              border-radius: 6px 0px 4px 0px;
              display: flex;
              justify-content: center;
              align-items: center;
              .liveText {
                font-weight: 600;
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
          .goodsRight {
            flex: 1;
            margin-left: 12px;
            text-align: left;
            div {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              span {
                font-size: 14px;
                font-weight: 600;
                color: #222222;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              > span:hover {
                color: #ff924b;
              }
              img {
                width: 18px;
                height: 16px;
                margin-right: 6px;
              }
              .redImg {
                width: 13px;
              }
            }
            p {
              font-size: 14px;
              color: #888888;
              padding-top: 10px;
            }
          }
        }
        // 达人
        .talentBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // cursor: pointer;
          .avatorImg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
            cursor: pointer;
          }
          .talentRight {
            flex: 1;
            text-align: left;
            margin-left: 12px;
            p:nth-of-type(1) {
              text-align: left;
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            > p:hover {
              color: #ff924b;
            }
            p:nth-of-type(2) {
              text-align: left;
              font-size: 14px;
              color: #888;
            }
          }
        }
        .tdText01 {
          color: #222222;
          span {
            color: #1779ff;
          }
        }
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    // margin-top: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    // padding-left: 1000px;
    .el-pagination {
      float: right;
    }
  }
  .detailsBtnwl:hover {
    background-color: #fe883b;
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 222;
  font-size: 0;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    img {
      width: 5px;
      height: 10px;
      vertical-align: baseline;
    }
  }
  &.isShow {
    display: block;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
[pr] {
  padding-right: 30px;
}
[pl] {
  padding-left: 40px;
}
[pl15] {
  padding-left: 15px;
}
.m_l {
  margin-left: 4px;
}
.cursor {
  cursor: pointer;
}
/* 鼠标经过行业+品类 变色 */
.radio_item:hover {
  color: #1779ff !important;
}
</style>
